<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <template #header>
          <el-breadcrumb separator-class="el-icon-arrow-right" v-if="subjectID">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </template>
        <!--筛选  -->
        <div class="inline-form">
          <!-- 表单 -->
          <el-form :inline="true" :model="formData" class="demo-form-inline">
            <el-form-item label="目录名称">
              <el-input v-model="formData.directoryName"></el-input>
            </el-form-item>
            <el-form-item class="state" label="状态">
              <el-select v-model="formData.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="empty">清除</el-button>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-form>
          <!-- 新增 -->
          <div class="right">
            <!-- 返回学科 -->
            <el-link
              :underline="false"
              type="primary"
              icon="el-icon-back"
              v-if="subjectID"
              @click="$router.push('/subjects/list')"
            >
              返回学科
            </el-link>
            <!-- 新增按钮 -->
            <el-button type="success" @click="add('新增目录')">
              <i class="el-icon-edit"></i>
              新增目录
            </el-button>
            <el-button type="danger" v-if="!subjectID" @click="exportExcel"
              >导出 Excel</el-button
            >
          </div>
        </div>

        <!-- 工具栏 -->
        <PageTools :total="total" />
        <!-- 表格 -->
        <div class="table">
          <!-- 表格 -->
          <el-table :data="tableData" style="width: 100%" v-loading="loading">
            <el-table-column
              label="序号"
              width="150"
              type="index"
            ></el-table-column>
            <el-table-column
              prop="subjectName"
              label="所属学科"
              width="200"
            ></el-table-column>
            <el-table-column
              width="230"
              prop="directoryName"
              label="目录名称"
            ></el-table-column>
            <el-table-column prop="username" label="创建者" width="230">
            </el-table-column>
            <el-table-column
              :formatter="formatterDate"
              prop="addDate"
              label="创建日期"
              width="280"
            >
            </el-table-column>
            <el-table-column prop="totals" label="面试题数量" width="230">
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态"
              :formatter="formatterState"
            >
            </el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="forbidden(row)"
                >
                  {{ row.state ? "禁用" : "启用" }}
                </el-link>
                <el-link
                  :disabled="row.state ? true : false"
                  :type="row.state ? 'info' : 'primary'"
                  :underline="false"
                  @click="edit('修改目录', row)"
                  >修改</el-link
                >
                <el-link
                  :disabled="row.state ? true : false"
                  :type="row.state ? 'info' : 'primary'"
                  :underline="false"
                  @click="del(row)"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="paging">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="  prev, pager, next,sizes, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
        <!-- 弹框 -->
        <DirectorysAadd
          :subjectID="subjectID"
          ref="Dialog"
          :getList="getList"
          :empty="empty"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { list as getCompanys } from '@/api/hmmm/companys'
import { list as getQuestion } from '@/api/hmmm/questions'
// 导入封装的组件
import PageTools from '../components/PageTools.vue'
import DirectorysAadd from '../components/directorys-add.vue'
// 导入封装的方法
import { list, changeState, remove } from '@/api/hmmm/directorys'
// 导入dayjs插件
import dayjs from 'dayjs'

export default {
  // 注册封装的组件
  components: {
    PageTools,
    DirectorysAadd
  },
  created () {
    getCompanys()
    getQuestion()
    // 判断路由是否带了参数
    if (this.$route.query.id) {
      this.subjectID = Number(this.$route.query.id)

      // this.formDialog.subjectID = this.$route.query.id
    }
    // 页面加载调用获取列表的方法
    this.getList()
  },
  data () {
    return {
      // 数据总条数
      total: 0,
      // 筛选的表单数据
      formData: {
        // 筛选的名字
        directoryName: null,
        // 筛选的状态
        state: null
      },
      // 表格数据
      tableData: [],
      // 加载效果
      loading: false,
      // 分页数据
      page: 1, // 当前页
      pagesize: 10, // 每页多少条数据
      // 路由传递的id  默认为空
      subjectID: null
    }
  },
  methods: {
    // 定义获取列表数据的方法
    async getList () {
      // 开启加载效果
      this.loading = true
      // 发送请求获取数据
      const { data } = await list({
        ...this.formData,
        page: this.page,
        pagesize: this.pagesize,
        subjectID: this.subjectID
      })
      // 将数据赋值给data中的数据
      // 总条数
      this.total = data.counts
      // 表格数据
      this.tableData = data.items
      // 关闭加载效果
      this.loading = false
    },
    // 格式化日期
    formatterDate (row, column, cellValue, index) {
      // 使用插件格式化日期
      return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
    },
    // 格式化状态
    formatterState (row, column, cellValue, index) {
      // 根据传递的数据来判断状态是否启用或者禁用
      return cellValue ? '已启用' : '已禁用'
    },
    // 更改状态按钮
    async forbidden (row) {
      // 更改状态数据
      row.state = row.state ? 0 : 1
      // 发送请求更改数据
      await changeState({ id: row.id, state: row.state })
      // 提示信息
      this.$message.success('操作成功')
    },
    // 删除数据
    del (row) {
      //  消息提示框
      this.$confirm('是否删除此数据', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 发送请求删除数据
          await remove(row)
          // 判断删除的是否为最后一个数据 如果是最后一个则跳转到上一页数据
          if (this.tableData.length === 1 && this.page > 1) {
            // 页码减1
            this.page--
          }
          // 提示信息
          this.$message.success('删除成功!')
          // 重新渲染列表
          this.getList()
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    // 新增目录
    add (title) {
      // 更改弹框标题
      this.$refs.Dialog.title = title
      // 开启弹框
      this.$refs.Dialog.showDialog = true
      // 将页码重置为1
      this.page = 1
    },
    // 修改目录
    edit (title, row) {
      // 更改弹框标题
      this.$refs.Dialog.title = title
      // 开启弹框
      this.$refs.Dialog.showDialog = true
      // console.log(row)
      // 更改数据类型
      // console.log(this.subjectList.find(item => item.value === row.subjectID))
      // 数据回填
      this.$refs.Dialog.formDialog = { ...row }
    },
    // 导出Excel文件
    async exportExcel () {
      // 工作上，别人去用，这个模块不常用!需要函数!设计为:当用户点击该功能才去进行加载这个包或函数!
      // 懒加载:有的业务模块，背后需要包，JS文件模块设计为懒加载
      // 导出思路:
      // 1、导出:发现要两部分数据
      // 1.1、header头部 [姓名 ，'工资 ] 行数据，要的中文字段
      // 1.2、每行数据:而是和头部字段对应的数组 ['zs,1000]! 多行数据 [ 行数据1，行数据2,...]

      // 2、导出下载的数据:是哪部分数据?
      // NO: this.tableData 永远是10条数据
      // YES: 全都倒出来 getList(1，容量使用全部total)
      // 发送请求获取数据
      const { data } = await list({ page: 1, pagesize: this.total })
      // 将数据存到arr中
      const arr = data.items
      // // 3、处理数据
      // // 头部数据
      const headersArr = [
        '所示学科',
        '目录名称',
        '创建者',
        '创建日期',
        '面试题数量',
        '状态'
      ]
      // //     英中文对照表
      const headersRelations = {
        所示学科: 'subjectName',
        目录名称: 'directoryName',
        创建者: 'username',
        创建日期: 'addDate',
        面试题数量: 'totals',
        状态: 'state'
      }
      // 定义数组 用来存储最后处理完的数据
      const newArr = []
      // 使用forEach处理数据
      arr.forEach((item) => {
        // 定义数组存储数据
        const newOne = []
        // 使用for in 遍历对象
        for (const cnKey in headersRelations) {
          // cnKey 中文名
          // 根据对应表 使用中文名找到对应的英文名
          const enKey = headersRelations[cnKey]
          // 根据英文名在item中找到每一个对应的值 存储到val中
          let val = item[enKey]
          // 处理日期
          if (enKey === 'addDate') {
            val = this.formatterDate(null, null, val)
          }
          // 处理聘用形式
          if (enKey === 'state') {
            val = this.formatterState(null, null, val)
          }
          // 将处理完的数据添加到newOne数组中
          newOne.push(val)
        }
        // 将newOne数组添加到newArr数组中
        newArr.push(newOne)
      })
      // 4、执行导出
      import('@/vendor/Export2Excel').then((excel) => {
        // excel: 该文件内导出对象，可以无论是按需或默认导出，都会得到整体对象
        excel.export_json_to_excel({
          header: headersArr, // 表头 必填
          data: newArr, // 具体数据 必填
          filename: '目录列表数据', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    // 更改每页的条数
    handleSizeChange (val) {
      // 将更改的值赋值给data中的数据
      this.pagesize = val
      // 将页码重置为1
      this.page = 1
      // 重新渲染数据
      this.getList()
    },
    // 更改当前的页码
    handleCurrentChange (val) {
      // 将更改的值赋值给data中的数据
      this.page = val
      // 重新渲染数据
      this.getList()
    },
    // 提交筛选数据
    async onSubmit () {
      // 调用发送请求方法 提交筛选数据
      this.getList()
    },
    // 清空数据
    empty () {
      // 清空数据
      this.formData = {
        // 筛选的名字
        directoryName: null,
        // 筛选的状态
        state: null
      }
      // 调用获取列表的方法
      this.getList()
    }
  }
}
</script>

<style scoped lang='scss'>
.el-card {
  font-size: 14px;
  // 筛选 表单样式
  .inline-form {
    display: flex;
    justify-content: space-between;
    .state {
      margin-left: 20px;
    }
    .right {
      .el-link {
        margin-right: 10px;
      }
    }
  }
  // 表格样式
  .table {
    margin-bottom: 20px;
    .el-table::v-deep th {
      background-color: #fafafa;
    }
    .el-link {
      margin-right: 10px;
    }
  }
  // 分页
  .paging {
    float: right;
    margin-bottom: 20px;
  }
}
</style>
